<route lang="json5">
{
  style: {
    navigationBarTitleText: '我的',
    navigationBarTextStyle: "white",
    navigationBarBackgroundColor: "#3049BD"
  },
}
</route>

<template>
  <view class="page">
    <image class="header-bg" src="@/static/images/user/header-bg.png" mode="aspectFill" />

    <view class="avatar-box">
      <view class="avatar-box__left" @click="toLogin">
        <sar-avatar size="60px" :src="userInfo.avatar" />
        <view class="user-info">
          <view class="user-info__name">
            <text class="username">{{ userInfo.username }}</text>
            <sar-tag color="#242933" text-color="#875d0d">
              普通用户
            </sar-tag>
          </view>
          <view class="user-info__phone">{{ userInfo.phone }}</view>
        </view>
      </view>
      <view class="avatar-box__right">
        <view class="more">
          <text>更多</text>
          <sar-icon name="right" />
        </view>
      </view>
    </view>

    <view class="cell-box">
      <sar-list-item title="账户设置" hover arrow icon-size="28px" :icon="IconSetting"></sar-list-item>
      <sar-list-item title="我的钱包" hover arrow icon-size="28px" :icon="IconWallet"></sar-list-item>
      <sar-list-item title="我的收藏" hover arrow icon-size="28px" :icon="IconCollect"></sar-list-item>
      <sar-list-item title="消息通知" hover arrow icon-size="28px" :icon="IconMessage">
        <template #value>
          <sar-badge :value="20" />
        </template>
      </sar-list-item>
      <sar-list-item title="关于我们" hover arrow icon-size="28px" :icon="IconAbout">
        <template #value>
          <sar-badge dot color="var(--sar-blue)"></sar-badge>
        </template>
      </sar-list-item>
    </view>

    <gi-gap></gi-gap>

    <view class="apps">
      <sar-card title="应用">
        <template #extra>
          <sar-tag theme="primary">更多<sar-icon name="right" /></sar-tag>
        </template>
        <sar-grid :columns="4">
          <sar-grid-item text="我的日程" :icon="IconCalendar" icon-size="38px" />
          <sar-grid-item text="购物车" :icon="IconCart" icon-size="38px" />
          <sar-grid-item text="优惠券" :icon="IconCoupons" icon-size="38px" />
          <sar-grid-item text="更多应用" :icon="IconMore" icon-size="38px" />
        </sar-grid>
      </sar-card>
    </view>

    <gi-footer text="Copyright © 2025 gi-uni-app"></gi-footer>

    <gi-gap></gi-gap>
  </view>
</template>

<script lang="ts" setup>
import IconAbout from '@/static/images/user/icon-about.svg'
import IconCalendar from '@/static/images/user/icon-calendar.svg'
import IconCart from '@/static/images/user/icon-cart.svg'
import IconCollect from '@/static/images/user/icon-collect.svg'
import IconCoupons from '@/static/images/user/icon-coupons.svg'
import IconMessage from '@/static/images/user/icon-message.svg'
import IconMore from '@/static/images/user/icon-more.svg'
import IconSetting from '@/static/images/user/icon-setting.svg'
import IconWallet from '@/static/images/user/icon-wallet.svg'

import { useUserStore } from '@/store'

const { userInfo } = useUserStore()

function toLogin() {
  uni.navigateTo({ url: '/pages/login/index' })
}
</script>

<style lang="scss" scoped>
.header-bg {
  width: 100%;
  height: 200px;
}

.avatar-box {
  padding: 0 10px;
  margin-top: -130px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  z-index: 9;
  position: relative;
  margin-bottom: 30px;

  .avatar-box__left {
    display: flex;
    align-items: center;

    .user-info {
      display: flex;
      flex-direction: column;
      margin-left: 10px;
    }

    .user-info__name {
      display: flex;
      align-items: center;
      color: #fff;
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: 500;

      .username {
        margin-right: 8px;
      }
    }

    .user-info__phone {
      font-size: 12px;
      color: #e2e2e2;
    }
  }

  .avatar-box__right {
    .more {
      font-size: 14px;
      color: #e2e2e2;
    }
  }
}

.cell-box {
  padding: 0 $padding;
  border-radius: 8px;
  overflow: hidden;
}

.apps {
  padding: 0 $padding;
}
</style>
